// pages/video/video.js
import request from '../../utils/request'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navList: [], // 导航栏数据
    borderId: null, // id用来对 比设置了哪个边框
    videoList: [], // 获取的视频列表
    vodeId: '', // 当前视屏id
    playbackRecord: [], // 记录视屏的播放时间
    isRefresh: false, // 下拉刷新状态
    rightSlide: null, // 判断滑动方向
    leftSlide: null // 左滑
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 初始化页面数据
    this.initialization()
  },

  // 初始化视屏页数据
  async initialization() {
    const res = await request('/video/group/list')
    this.setData({ navList: res.data.slice(0, 14), borderId: res.data[0].id })
    // 设置首页视屏
    this.getVideoList(this.data.borderId)
  },

  // 点击导航触发 设置下边框
  styelBorde(e) {
    console.log(e);
    // 判断此次点击的id是否和上次的一样， 如果不一样则发起请求
    if (!(e.currentTarget.dataset.id === this.data.borderId)) {
      // 如果不一样则将此时标签id保存
      this.setData({ borderId: e.currentTarget.dataset.id })
      // 先置空数据
      this.setData({ videoList: [] })
      // 使用此次id请求
      this.getVideoList(e.currentTarget.dataset.id)
    }
  },

  // 根据标签id获取对应视频信息
  async getVideoList(navId) {
    // 获取数据之前设置加载中
    wx.showLoading({ title: '正在加载ing...' })
    const videos = await request('/video/group', { id: navId })
    // 循环遍历 id 收集请求
    const ajaxs = []
    console.log(videos);
    videos.datas.forEach(item => {
      ajaxs.push(request('/video/url', { id: item.data.vid }))
    })
    // 等待所有收集的请求结束
    const res = await Promise.all(ajaxs)
    videos.datas.forEach((item, index) => {
      item.url = res[index].urls
    })
    // 设置数据之前关闭加载
    wx.hideLoading()
    this.setData({ videoList: videos.datas, isRefresh: false })
    /**
     * 容易出bug
     */
    setTimeout(() => {
      this.setData({
        rightSlide: null, 
        leftSlide: null 
      })
    }, 400)
  },

  // 点击图片时触发
  suspendFn(e) {
    /** 单例模式
     *  第一次触发时先获取当前视屏的id 在判断是否有此实例 
     *  
     */
    // 获取当前视屏的id
    let vid = e.currentTarget.id
    // 判断有没有此视屏的实例 此时视屏id和上次id是否重复 进行暂停
    // this.context && this.vid !== vid && this.context.stop()

    // 点击图片时设置视屏id
    this.setData({ vodeId: vid })

    // 保存上次视屏的id
    // this.vid = vid

    // 获取当前点击的视屏实例
    // this.context = wx.createVideoContext(vid)
    // this.context.play()


    // 判断进度数组是否有值
    if (!this.data.playbackRecord.length) {
      return
    }
    const time = this.data.playbackRecord.find(item => item.id === vid)
    console.log(time.currentTime);
    if (time) {
      // 设置延迟执行，等待v-if成功渲染dom
      setTimeout(() => {
        wx.createVideoContext(vid).seek(time.currentTime)
      }, 200)
    }
  },

  /**
   * 播放进度变化时触发
   */
  playbackProgress(e) {
    // console.log(e.detail.currentTime);
    // console.log(e.currentTarget.id);
    // 判断是否为空
    if (this.data.playbackRecord.length === 0) {
      this.setData({ playbackRecord: [{ id: e.currentTarget.id, currentTime: e.detail.currentTime }] })
    }
    // 数组没有此数据时
    if (!this.data.playbackRecord.some(item => item.id === e.currentTarget.id)) {
      this.setData({ playbackRecord: [...this.data.playbackRecord, { id: e.currentTarget.id, currentTime: e.detail.currentTime }] })
    } else {
      // 数组有此数据时
      this.setData({
        playbackRecord: this.data.playbackRecord.map(item => {
          if (item.id === e.currentTarget.id) {
            return { id: item.id, currentTime: e.detail.currentTime }
          }
          return item
        })
      })
    }
  },

  /**
   * 视屏播放完触发事件
   */
  videoEnd(e) {
    const { playbackRecord } = this.data
    // 查找播放完视屏的下标 并删除 splice会影响原数组
    playbackRecord.splice(playbackRecord.findIndex(item => item.id === e.currentTarget.id), 1)
    this.setData({ playbackRecord })
  },

  /**
   * 
   * 下拉刷新触发 
   */
  pullDownRefresh() {
    this.getVideoList(this.data.borderId)
  },

  /** scroll-view上拉刷新 整个页面要使用生命周期事件
   * 滚动到底部触发
   */
  async bottomEvent() {
    // 由于接口没有分页使用的是推荐视频的分页
    let i = 0
    this.page ? i = this.page += 10 : i += 10
    this.page = i
    const newVideoList = await request('/video/timeline/recommend', { offset: i })
    const { videoList } = this.data
    console.log(newVideoList);
    videoList.push(...newVideoList.datas)
    this.setData({ videoList })
    console.log(newVideoList);
  },

  slideX(e) {
    // 判断右滑
    if (e.detail.dx < 0 && !this.data.rightSlide) {
      this.data.rightSlide = e.detail.dx
      let { navList, borderId } = this.data
      const index = navList.findIndex(item => item.id === borderId)
      this.id = borderId
      console.log(index + '右');
      if(!index) {
        return
      }
      
      this.styelBorde({currentTarget:{dataset:{id: navList[index -1].id}}})
    }
    // 判断左滑
    if (e.detail.dx > 0 && !this.data.leftSlide) {
      this.data.leftSlide = e.detail.dx
      let { navList, borderId } = this.data
      const index = navList.findIndex(item => item.id === borderId)
      // 判断是否超出最大下标
      if(index + 1 > navList.length) {
        return
      }
      this.styelBorde({currentTarget:{dataset:{id: navList[index + 1].id}}})
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})